<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="彭俊超">
    <title>遮罩层作业</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .outer{
            margin:50px auto;
            width:500px;
            background-color:#ccc;
            padding:15px;
        }
        .outer>div{
            text-align:center;
            width:400px;
            background-color:white;
            margin:0 auto;
            padding:10px;
        }
        .top p{  padding:15px;
            margin:0;
            text-align: justify;
        }
        .outer .top{
            margin-bottom:20px;
            position: relative;
        }
        .inner{
            position: absolute;
            top:0;
            left:0px;
            width:100%;
            height:100%;
            background-color:transparent;
            border:5px solid orange;
            display: none;
        }
        section{
            margin: 0;
            padding: 0;
            display:inline-block;
            position: relative;
            overflow: hidden;
        }
        .bottom .content{
            position: absolute;
            top:0;
            left:-190px;
            width:100%;
            height:100%;
            /*background-color:rgba(0, 0, 0,0.5);*/
            text-align:center;
            color:white;
            opacity: 0;
            z-index: 100;
        }
        .bottom .zzc{
            position: absolute;
            top:0;
            left:0px;
            width:100%;
            height:100%;
            /*background-color:rgba(0, 0, 0,0.4);*/
            background-color:black;
            opacity: 0;
        }
        .bottom img{
            width:168px;
            height:170px;
        }
        .bottom section p{
            margin:0;
            font-size:14px;
        }
    </style>
</head>

<body>
<div class="outer">
    <div class="top">
        <img src="./img/00.png" alt="">
        <p>
            发送到家乐福就算到了福建省电力福建省雷锋精神疗法就是浪费大家搜罗
            发送到家乐福就算到了福建省电力福建省雷锋精神疗法就是浪费大家搜罗
            发送到家乐福就算到了福建省电力福建省雷锋精神疗法就是浪费大家搜罗

        </p>
        <div class="inner"></div>
    </div>
    <div class="bottom">
        <section>
            <img src="./img/01.png" alt="">
            <div class="content">
                <h3>释迦佛世锦赛得分</h3>
                <p>发神发送到肌肤的水煎服</p>
                <p>发神发送到肌肤的水煎服</p>
            </div>
            <div class="zzc"></div>
        </section>
        <section>
            <img src="./img/QQ图片20170817192403.jpg" alt="">
           <div class="content">
                <h3>释迦佛世锦赛得分</h3>
                <p>发神发送到肌肤的水煎服</p>
                <p>发神发送到肌肤的水煎服</p>
            </div>
            <div class="zzc"></div>
        </section>
    </div>
</div>

<script src="./jquery.js">
    
</script>
</body>

</html>
<script>
    $('.top').hover(function(){
        $('.inner').stop().fadeIn();
    },function(){
        $('.inner').stop().fadeOut();
    });

    $('.bottom section').hover(function(){
        $(this).find('.zzc').stop().fadeTo(500,0.5);
        $(this).find('.content').stop().animate({
            left:0,
            opacity:0.5,
        })
    },function(){
        $(this).find('.zzc').stop().fadeTo(500,0);
         $(this).find('.content').stop().animate({
            left:-190,
            opacity:0,
        })
    });
</script>